@extends("layouts_admin.index")
@section("content")
    <section class="content">
        <div class="row">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Data Table</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="table-responsive">
                        <div class="col-sm-12">
                            <div class="col-sm-2" style="width: 100px">
                                <div class="input-group">
                                    <button type="button" class="btn btn-success" data-toggle="modal"
                                            data-target="#myModal">
                                        添加文章
                                    </button>
                                </div>
                            </div>
                            <form name="admin_list_sea" class="form-search" method="post" action="">
                                <div class="col-sm-3">
                                    <div class="input-group">
                                        <input type="text" id="key" class="form-control" name="key" value=""
                                               placeholder="输入需查询的文章名称">
                                <span class="input-group-btn"> 
                                    <button type="submit" class="btn btn-primary"><i
                                                class="fa fa-search"></i> 搜索</button>
                                </span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-sm-12" style="height: 20px;"></div>
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>标题</th>
                                <th>所属分类</th>
                                <th>文章封面</th>
                                <th>浏览量</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>状态</th>
                                <th>是否推荐</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>Table cell</td>
                                <td>
                                    <button type="button" class="btn btn-warning btn-xs">
                                        修改
                                    </button>
                                    <button type="button" class="btn btn-danger btn-xs">
                                        删除
                                    </button>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            模态框（Modal）标题
                        </h4>
                    </div>
                    <div class="modal-body">
                        在这里添加一些文本
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary">
                            提交更改
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </section>

@endsection
@section("js")
    <script type="text/javascript">
        $(document).ready(function () {
            $('#example1').DataTable();
            /*
             $('#example1 tbody').on( 'click', 'tr', function () {
             $(this).toggleClass('selected');
             } );*/

            /*$('#button').click( function () {
             alert( table.rows('.selected').data().length +' row(s) selected' );
             } );*/
        });

    </script>
@endsection